<script setup>
import {
  ALLOW_MAILS_ROUTE,
  HOME_ROUTE, LIU_ROUTE, MY_ROUTE, ORDER_MANAGE_ROUTE,
  PRODUCT_ADD_OR_UPDATE_ROUTE,
  PRODUCT_CATEGORY_ROUTE, PRODUCT_MANAGE_ROUTE
} from "@/router/routes/index/index.js";
import {useRouter} from "vue-router";
import {ref, onBeforeMount, watchEffect} from "vue";
import useAccountStore from "@/store/modules/AccountStore.js";
import {getAdminAllInfo} from "@/api/manager.js";
import {logoutAPI} from "@/api/logout.js";
import {LOGIN_BY_MAIL_ROUTE} from "@/router/routes/login/login.js";
import {ROOT} from "@/constants/ManagerRole.js";

const router = useRouter()

/**
 * 前往指定的路由
 *
 * @param index
 */
const goRoute = (index) => {
  router.push({name: index})
}

const manager = ref({})
onBeforeMount(async () => {
  const res = await getAdminAllInfo()
  manager.value = res
  useAccountStore().saveManager(res)
})
watchEffect(() => {
  manager.value = useAccountStore().manager
})

const goMy = () => {
  router.push({name: MY_ROUTE})
}

const logout = async () => {
  ElMessageBox.confirm(
      `是否确认退出登录`,
      '退出登录',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    const res = await logoutAPI()
    if (res) {
      useAccountStore().clear()
      router.push({name: LOGIN_BY_MAIL_ROUTE, query: {toRouteName: HOME_ROUTE}})
    }
  }).catch(() => {
  
  })
}
</script>

<template>
  <div class="menu">
    <el-menu
        class="min-h-screen h-screen el-menu-vertical"
        active-text-color="#ffd04b"
        background-color="#545c64"
        :default-active="HOME_ROUTE"
        text-color="#fff"
        @select="goRoute"
    >
      <div class="h-full w-full flex flex-col justify-between items-start">
        <div class="w-full">
          <el-menu-item :index="HOME_ROUTE">
            <el-icon>
              <span class="iconfont icon-shouye1"></span>
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <!--<el-sub-menu index="PLATFORM_MANAGE">-->
          <!--  <template #title>-->
          <!--    <el-icon>-->
          <!--      <span class="iconfont icon-dianpu"></span>-->
          <!--    </el-icon>-->
          <!--    <span>平台管理</span>-->
          <!--  </template>-->
          <!--  <el-menu-item :index="PRODUCT_CATEGORY_ROUTE">公告</el-menu-item>-->
          <!--  <el-menu-item :index="PRODUCT_CATEGORY_ROUTE">用户端首页轮播图</el-menu-item>-->
          <!--  <el-menu-item :index="PRODUCT_ADD_OR_UPDATE_ROUTE">管理端背景</el-menu-item>-->
          <!--</el-sub-menu>-->
          <el-sub-menu index="USER_MANAGE">
            <template #title>
              <el-icon>
                <span class="iconfont icon-weibiaoti3"></span>
              </el-icon>
              <span>用户管理</span>
            </template>
            <!--<el-menu-item :index="PRODUCT_CATEGORY_ROUTE">用户账号</el-menu-item>-->
            <el-menu-item :index="LIU_ROUTE">用户留言</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="GOODS_MANAGE">
            <template #title>
              <el-icon>
                <span class="iconfont icon-dianpu"></span>
              </el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item :index="PRODUCT_CATEGORY_ROUTE">商品分类</el-menu-item>
            <el-menu-item :index="PRODUCT_ADD_OR_UPDATE_ROUTE">新增商品</el-menu-item>
            <el-menu-item :index="PRODUCT_MANAGE_ROUTE">商品管理</el-menu-item>
          </el-sub-menu>
          <el-menu-item :index="ORDER_MANAGE_ROUTE">
            <template #title>
              <el-icon>
                <span class="iconfont icon-dingdan"></span>
              </el-icon>
              <span>订单管理</span>
            </template>
          </el-menu-item>
          <el-sub-menu v-if="manager?.role === ROOT" index="MANAGER_MANAGE">
            <template #title>
              <el-icon>
                <span class="iconfont icon-yonghuxinxi"></span>
              </el-icon>
              <span>管理员管理</span>
            </template>
            <el-menu-item :index="ALLOW_MAILS_ROUTE">邮箱管理</el-menu-item>
            <!--<el-menu-item index="2-2">账号管理</el-menu-item>-->
            <!--<el-menu-item index="2-3">角色管理</el-menu-item>-->
            <!--<el-menu-item :index="AUTHORITY_ROUTE">权限管理</el-menu-item>-->
          </el-sub-menu>
        </div>
        <div
            @click="goMy"
            class="text-gray-100 p-2 flex justify-start items-stretch cursor-pointer"
        >
          <div class="mr-2 w-14 h-14 rounded-full overflow-hidden">
            <img class="w-full h-full object-cover" :src="manager?.avatar" alt="">
          </div>
          <div>
            <div class="w-20 truncate">{{ manager?.username }}</div>
            <div class="mt-2 w-20 text-gray-400 text-xs truncate">{{ manager?.account }}</div>
          </div>
          <div @click.stop="logout" class="flex-center p-2">
            <span class="iconfont icon-daochu text-xl "></span>
          </div>
        </div>
      </div>
    </el-menu>
  </div>
</template>

<style>

</style>